


var dls = document.querySelectorAll('dl:not(.select)');
var selected=document.querySelector('.select');

for (var i = 0; i < dls.length; i++) {
    dls[i].mark=false;	//给每一行的dl标签添加一条属性，用于对应下面的dd标签。我们约定如果这个属性的值为true表示对应的标签没有创建。如果值为false表示对应的标签已经创建了
    select(i);
}

/**
 * 选择筛选项
 * @param n
 */
function select(n) {
    var dds = dls[n].querySelectorAll('dd');
    var prev=null;
    var dd=null;	//每一行都需要创建一个dd标签，放到这里是为了如果标签已经被创建了，通过这个变量能够找到这个标签

    for (var i = 0; i < dds.length; i++) {
        if(i==0){
            dds[i].className = 'active';
        }


        dds[i].onclick = function () {
            //给当前点击的添加一个高亮
            //prev && (prev.className = '');
            dds[0].className = '';
            if(prev){
                prev.className = ''
            }

            this.className = 'active';

            prev = this;


            //创建dd标签
            var parent=this.parentNode;
            if(!parent.mark){	//这个条件满足说明对应的dd标签还没有创建
                dd=document.createElement('dd');
                dd.innerHTML=this.innerHTML;
                selected.appendChild(dd);

                parent.mark=true;

            }else{
                //走这里的时候说明对应的标签已经创建了，只需要把内容修改了就可以了
                dd.innerHTML=this.innerHTML;
            }


            var span=document.createElement('span');
            var This=this;
            span.innerHTML='X';
            span.className='cancel';
            span.onclick=function(){
                selected.removeChild(dd);
                This.className='';
                parent.mark=false;
            };
            dd.appendChild(span);
        };
    }
}

/**
 * 面板赋值
 * @param data
 */
function showSearchResultWithPanel(data) {
    let html="<div class=\"col-md-3 col-sm-6\">\n" +
        "    <!-- Pricing Table Item Start -->\n" +
        "    <div class=\"pricing-table-item\">\n" +
        "        <div class=\"pt-head\">\n" +
        "            <div class=\"caption\">地区："+data.area+"</div>\n" +
        "            <div class=\"pt-price-tag\" style=\"font-size: 30px;padding: 10px 0\">"+data.money+"<span>/RMB</span></div>\n" +
        "            <div class=\"pt-plan\">"+data.feature+"</div>\n" +
        "        </div>\n" +
        "        <div class=\"pt-body\">\n" +
        "            <div class=\"pt-features\">\n" +
        "                <ul>\n" +
        "                    <li>"+data.cpu+"核 CPU</li>\n" +
        "                    <li>"+data.money+"GB 内存</li>\n" +
        "                    <li>"+data.disk+" "+data.disk_type+"硬盘</li>\n" +
        "                    <li>"+data.bandwidth+"Mbps 宽带</li>\n" +
        "                    <li>"+data.defense_feature+"</li>\n" +
        "                    <li class=\"text-left\" style=\"height: 160px;white-space:normal;overflow-y:auto \">"+data.intro+"</li>\n" +
        "                </ul>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <div class=\"pt-footer\">\n" +
        "            <a href=\"/good/"+data.id+".html\" class=\"btn btn-custom-reverse\">立即购买</a>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "    <!-- Pricing Table Item End -->\n" +
        "</div>";
    $("#search-result-panel").append(html);
}
/**
 * 表格赋值
 * @param data
 */
function showSearchResultWithTable(dataTeble,data,type,order = '',orderType = 'desc') {
    if(type==="reload"){
        dataTeble.clear().draw();
    }
    
    for(let i=0;i<data.length;i++) {
        let name = data[i].name;
        let cpu = data[i].cpu+"核";
        let bandwidth = data[i].bandwidth+"M";
        let memory = data[i].memory+"G";
        let disk = data[i].disk+"G ("+data[i].disk_type+")";
        let feature = data[i].feature;
        let defense_feature = data[i].defense_feature;
        let money = data[i].money;
        let intro = data[i].intro;
        let id = data[i].id;
        let show = '<a href=\'javascript:showDetail("' + intro + '")\' style="color: #6fae17;font-size: 12px;">详情</a>';
        let button = "<a href='/good/" + id + ".html'><span class=\"label label-success\">购买</span></a>"
        dataTeble.row.add([name, cpu, bandwidth, memory, disk,  feature,defense_feature, money, show, button]).draw().node();
    }
    if(order !== ''){
    	dataTeble.order([9,orderType]).draw();
    }
    
}
/**
 * 通过类名获取获取对象值
 * @param fromClassName 类名
 * @returns {string}
 */
function getAllFormvalueByClassName(fromClassName) {
    var domAll = $("." + fromClassName);
    var jsonValueList = '';
    domAll.each(function() {
        let text=$(this).children(".active")[0].innerHTML;
        let type= $(this).attr("id");
        let newText=cancelUnit(type,text)
        jsonValueList += "\"" + type + "\"" + ":\"" + newText + "\",";
    });
    if (jsonValueList.length > 0) {
        jsonValueList = jsonValueList.substring(0, jsonValueList.length - 1);
    }
    return '{'+jsonValueList+'}';
}

/**
 * 删除指定字符串的指定字符
 * @param targetType
 * @param targetValue
 * @returns {*}
 */
function cancelUnit(targetType,targetValue) {
    let unit;
    switch (targetType) {
        case 'memory':
        case 'disk':unit="GB";break;
        case 'bandwidth':unit="M";break;
        case 'cpu':unit="核";break;
        case 'money':unit="元";break;
        default:unit="";
    }
    return  targetValue.replace(unit,"")
}

/**
 * 给指定的目标增加单位
 * @param targetType
 * @param targetValue
 * @returns {string}
 */
function addUnit(targetType,targetValue) {
    let unit;
    switch (targetType) {
        case 'memory':
        case 'disk':unit="GB";break;
        case 'bandwidth':unit="M";break;
        case 'cpu':unit="核";break;
        case 'money':unit="元";break;
        default:unit="";
    }
    targetValue=targetValue==null?"":targetValue;
    return targetValue+unit;
}

/**
 * 点击表格详情按钮展示更多信息
 */
function showDetail(text) {

        $(document).dialog({
            titleText:'详细信息',
            overlayClose: true,
            content: text,
        });
}

/**
 * 筛选栏价格顺序反转
 */
function orderMoney() {
    let money = document.getElementById('money');
    var chil_arr = Array.prototype.slice.call(money.querySelectorAll('dd'), 1);//因为getElementByTagName获取到的是伪数组，所以要进行转换
    let newArr=chil_arr.reverse();
    let html="<dt>价格<span id='orderMoney' onclick='orderMoney()'>  ↑↓</span></dt><dd class='active'>全部</dd>";
    for(let i=0;i<newArr.length;i++){
        html+="<dd>"+newArr[i].innerHTML+"</dd>"
    }
    let rr=$("#money").find("dd");
    rr.remove()
    $(money).html(html)
    resSetSelect()
}

/**
 * 根据价格来排序表格
 */
function orderTableByMoney() {
    let table = document.getElementsByTagName('table')[0];
    let table_arr = Array.prototype.slice.call(table.querySelectorAll('tr'), 1);//因为getElementByTagName获取到的是伪数组，所以要进行转换
    let newTableArr=table_arr.reverse();
    console.log(newTableArr)
    let tableHtml="";
    for(let i=0;i<newTableArr.length;i++){
        tableHtml+="<tr>"+newTableArr[i].innerHTML+"</tr>"
    }

    $("#search-result-table").empty();
    $("#search-result-table").html(tableHtml);
    showDetail()
}
